<template>
  <el-popover placement="bottom-start" width="246" v-model="visible">
    <div class="flex">
      <el-input
        v-model="form.min"
        placeholder="最小值"
        size="small"
        style="width: 90px"
      />
      <div class="linebox flexcenter">~</div>
      <el-input
        v-model="form.max"
        placeholder="最大值"
        size="small"
        style="width: 90px"
      />
    </div>
    <div>
      <el-button
        type="primary"
        class="w_full mt-10"
        size="mini"
        @click="submitNum"
        >确定</el-button
      >
    </div>
    <el-select
      slot="reference"
      v-model="numberstr"
      placeholder="群人数"
      size="small"
      clearable
      @clear="handleClear"
      popper-class="pop_no_arrow"
      style="width: 100%"
    >
    </el-select>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      form: {
        min: "",
        max: "",
      },
      numberstr: "",
      visible: false,
    };
  },
  props: {
    value: {
      type: String,
    },
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.numberstr = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    submitNum() {
      this.numberstr = this.form.min + " ~ " + this.form.max;
      this.visible = false;
      this.$emit("input", this.numberstr);
    },

    handleClear() {
      this.form.max = "";
      this.form.min = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.linebox {
  width: 36px;
}
</style>